<template>
    <div class="accountSet">
      <jxf-titletip :title="title" :hasRefresh="true" @refreshPage="refreshPage"></jxf-titletip>
      <div class="jxf-content mt20">
        <el-card class="jxf-table-card mt10">
          <div slot="header" class="clearfix">
            <span>账户设置</span>
          </div>
          <div class="listArea">
            <div class="headImg text-center">
              <div>
                <viewer :images="accountInfo.userLogo ? accountInfo.userLogo.split(',') : []">
                  <div>  <img :src="accountInfo.userLogo"/></div>
                </viewer>
              </div>
              <el-button type="text" @click="changeImage">修改头像</el-button>
            </div>
            <el-form :model="accountInfo" ref="accountInfo" label-width="120px" :rules="rules">
              <el-form-item label="用户名:" prop="telphone" required>
                <el-input v-model.trim="accountInfo.telphone" disabled></el-input>
              </el-form-item>
              <el-form-item label="短信验证码：" required class="smsCode">
                <el-input v-model="accountInfo.smsCode">
                  <template slot="append">
                    <el-button type="text" @click="getPhoneWord" v-if="!isHasValidCode" :loading="isGetInterface">
                      发送验证码
                    </el-button>
                    <span class="" v-else>{{tipMessage}}</span>
                  </template>
                </el-input>
              </el-form-item>
              <!--<el-form-item label="旧密码:" prop="oldPassword" required>-->
                <!--<el-input v-model.trim="accountInfo.oldPassword" type="password"></el-input>-->
              <!--</el-form-item>-->
              <el-form-item label="新密码:" prop="firstPassword" required>
                <el-input v-model.trim="accountInfo.firstPassword" type="password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" prop="secondPassword" required>
                <el-input v-model.trim="accountInfo.secondPassword" type="password"></el-input>
              </el-form-item>
              <el-form-item class="text-center">
                <el-button type="primary" @click="changeAccountInfo">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
      <jxf-cropper :uploadUrl="uploadUrl" :isShowCropper.sync="isShowCropper" :tCropWidth="tCropWidth" :tCropHeight="tCropHeight" :dealImage="accountInfo.headImg" @getChangedImage="getChangedImage"></jxf-cropper>
    </div>
</template>

<script>
  import md5 from 'js-md5'
    export default {
        name: "AccountSet",
        data() {
          return {
            title: "账户设置",
            accountInfo: {
              userLogo: "",
              telphone: "",
              // oldPassword: "",
              firstPassword: "",
              secondPassword: ""
            },
            tipMessage: "",
            isHasValidCode: false,
            isGetInterface: false,
            rules: {
              oldPassword: [
                {
                  required: true, message: '旧密码不能为空', trigger: ['blur', 'change']
                },
                {
                  validator: window.validate.invalidSymbol, trigger: ['blur', 'change']
                },
              ],
              firstPassword: [
                {
                  validator: window.validate.invalidSymbol, trigger: ['blur', 'change']
                },
                {
                  required: true, message: '新密码不能为空', trigger: ['blur', 'change']
                },
                { min: 6, max: 12, message: '密码长度为6-12位', trigger: ['blur', 'change'] },
              ],
              secondPassword: [
                {
                  validator: window.validate.invalidSymbol, trigger: ['blur', 'change']
                },
                {
                  required: true, message: '确认密码不能为空', trigger: ['blur', 'change']
                },
                { min: 6, max: 12, message: '密码长度为6-12位', trigger: ['blur', 'change'] },
              ]
            },
            isShowCropper: false,
            tCropWidth: 200,
            tCropHeight: 200,
            uploadUrl: apis.home.uploadUrl
          }
        },
        methods: {
          // 修改头像
          changeImage() {
            this.isShowCropper = true;
          },
          getChangedImage(val) {
            this.accountInfo.userLogo = val;
          },
          getPhoneWord() {
            this.isGetInterface = true;
            this.isHasValidCode = true;
            let data = {
              codeType: 11,
              roleType: JSON.parse(window.localStorage.adminLogin).userType,
              telphone: this.accountInfo.telphone
            };
            let time = 60;
            this.tipMessage = time + "秒";
            setInterval(() => {
              if(time <= 0) {
                this.tipMessage = "发送验证码"
                this.isGetInterface = false;
                this.isHasValidCode = false;
                return ;
              }
              time --;
              this.tipMessage = time + "秒";
            }, 1000)
            ajax.post(apis.common.sendCode, data).then(res => {
              if(res.code === "10000000") {

              } else {
                this.$message.error(res.message)
              }
              this.isGetInterface = false;
            });
          },
          // 刷新
          refreshPage() {
            this.resetForm()
            this.getData();
          },
          // 重置
          resetForm() {
            this.$refs['accountInfo'].resetFields()
          },
          getData() {
            ajax.post(apis.home.getAccountInfo).then(res => {
              if(res.code === "10000000") {
                this.accountInfo.userLogo = res.data.userLogo
                this.accountInfo.telphone = res.data.telphone;
              } else {
                this.$message.error(res.message)
              }
            })
          },
          // 修改个人信息
          changeAccountInfo() {
            let data = {
              ...this.accountInfo,
              firstPassword: md5(this.accountInfo.firstPassword).toUpperCase(),
              secondPassword: md5(this.accountInfo.secondPassword).toUpperCase()
            }
            this.$refs['accountInfo'].validate((valid) => {
              if(valid) {
                ajax.post(apis.home.changeAccountInfo, data).then(res => {
                  if(res.code === "10000000") {
                    this.$message({
                      type: 'success',
                      message: '密码修改成功!'
                    });
                    window.localStorage.removeItem('adminLogin')
                    this.$router.push({ name: 'login' })
                  } else {
                    this.$message.error(res.message)
                  }
                })
              }
            })
          }
        },
        created() {
          this.getData()
        }
    }
</script>

<style lang="scss" scoped>
  .accountSet {
    .listArea {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .headImg {
        margin-bottom: 10px;
        margin-left: 7%;
        img {
          width: 160px;
          height: 160px;
          border-radius: 100%;
        }
      }
      .smsCode {
        .el-input {
          .el-button {
            padding: 0 10px;
          }
        }
      }
      .el-input {
        width: 300px;
      }
    }
  }
</style>
